<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --grogress:10%;
            --width:calc(100vh/19);
        }
        *{
            margin: 0;
            padding: 0;
            table-sizing: border-table;
        }
        html,body{
            width: 100%;
            height: 100%;
            /* overflow: hidden; */
        }
        body{
            min-width: calc(100vh + 200px) ;
        }

        .box{
            display: flex;
        }
        #table{
            background-color: #cdad00;
            height: calc(100%);
            width: calc(100vh);
            font-size: 0;
        }
        #progressbox{
            height: 10px;
            background-color: red;
            border-radius: 5px;
            position: relative;
        }
        input[type="checkbox"]{
            display: none;
        }
        .outer{
            width: var(--width);
            height: 0;
            padding-top: var(--width);
            display: inline-block;
            position: relative;
        }
        .outer::before{
            content: "";
            position: absolute;
            width: 100%;
            top: 18px;
            left: 18px;
            height: 100%;
            border: 1px solid #000;
            border-right: none;
            border-bottom: none;
        }
        /* .outer:nth-child(19n)::before{
            border: 1px solid none;
        } */
        .outer:nth-child(19n)::before{
            border: none;
            border-left: 1px solid #000;
        }
        .outer:first-child::before {
            border-top-color: #000;
        }
        .outer:nth-child(342) ~ .outer::before {
            border: none;
            border-top: 1px solid #000;
            height: 0;
        }
        #table .outer:last-child::before {
            border: none;
        }
        .switch-button+label{
            display: inline-block;
            font-size: 18px;
            position: absolute;
            top: -8px;
            left: 0px;
            width: var(--width);
            height: var(--width);
            text-align: center;
            line-height: var(--width);
            border-radius: 50%;
        }
        .switch-button[data-status='-1']+label{/*+选择器选择紧跟“+”左边选择器的第一个元素*/
            /* display: inline-block;
            transition: all .3s;
            background-color: #ddd; */
        }
        .switch-button[data-status='0']+label{/*选中表单后的样式，:checked表示checkbox被选中后的状态*/
            transition:  all .2s linear;
            background-color: #000;
            color: #fff;
        }
        .switch-button[data-status='1']+label{/*选中表单后的样式，:checked表示checkbox被选中后的状态*/
            transition:  all .2s linear;
            background-color: #fff;
            color: #000;
        }
        .action{
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="table">
        </div>
        <div class="action">
            <button onclick="preStep()">上一步</button>
            <button onclick="resStart()">重新开始</button>
        </div>
    </div>
    <script>
        var table = document.getElementById("table")
        var step = 0;
        var arr = [],saveStep,saveArr=[],saveDom,preDom;
        var haveShengli=false;
        for (let index = 0; index < 19; index++) {
            arr.push([])            
        }
        window.onload=()=>{
            for (let index = 0; index < 361; index++) {
                arr[Math.floor((index)/19)][(index)%19] = -1;
                var outer = document.createElement("div");
                outer.className="outer";
                var input = document.createElement("input");
                input.type = "checkbox"
                input.className="switch-button";
                input.id=`switch-button${index}`;
                input.setAttribute("data-index",`${index}`)
                input.setAttribute("data-status",'-1')
                input.addEventListener("change",gostep)
                outer.appendChild(input);
                var label = document.createElement("label");
                input.index=`${index}`;
                label.setAttribute("for",`switch-button${index}`)
                label.id=`switch-label${index}`;
                outer.appendChild(label);
                document.getElementById("table").appendChild(outer);
                saveDom = document.getElementById("table");
            }
        }
        let resStart = ()=>{
            for (let index = 0; index < arr.length; index++) {
                const element = arr[index];
                for (let jndex = 0; jndex < element.length; jndex++) {
                    if (element[jndex]!=-1) {
                        var fixjndex = jndex+(index)*arr.length;
                        arr[index][jndex] = -1;
                        var dom = document.getElementById(`switch-button${fixjndex}`)
                        dom.setAttribute("data-status",'-1')
                        dom.nextSibling.innerText=null;
                        saveArr = arr;
                        haveShengli = false;
                        step = 0;
                    }                  
                }
            }
        }
        let gostep=(event)=>{
            if (haveShengli) {
                return
            }
            if (event.target.dataset['status']==-1) {
                saveStep = step;
                step++;
                saveArr = JSON.parse(JSON.stringify(arr));
                var index = event.target.dataset["index"]
                var i = Math.floor((index)/19),j=(index)%19;
                event.target.nextSibling.innerText=step;
                saveDom = event.target;
                event.target.setAttribute("data-status",step%2==1?'0':'1')
                arr[i][j] = step%2==1?0:1;
                isSl(arr,i,j,step%2==1)
            }
        }
        let isSl=(chess,newi,newj,personflag)=>{
            var rownum = 0,clunum = 0,xienum = 0;
            var rowArr = [],colArr=[],zhengArr=[],fuArr=[]
            for (let index = newj-4; index <= newj+4; index++) {
                if (index<0) {
                    continue;
                }
                rowArr.push(arr[newi][index])    
                if (index==newj+4) {
                    isFive(rowArr);
                }
            }
            for (let index = newi-4; index <= newi+4; index++) {
                if (index<0) {
                    continue;
                }
                colArr.push(arr[index][newj])    
                if (index==newi+4) {
                    isFive(colArr);
                }
            }
            let newl = newj-4;
            for (let index = newi-4; index <= newi+4; index++) {
                if (index<0) {
                    continue;
                }
                zhengArr.push(arr[index][newl])    
                if (index==newi+4) {
                    isFive(zhengArr);
                }
                newl++;
            }
            var sum = newi+newj
            for (let index = newi-4; index <= newi+4; index++) {
                if (index<0) {
                    continue;
                }
                let jndex = sum - index;
                if (jndex<0) {
                    fuArr.push(undefined)    
                }else{
                    fuArr.push(arr[index][jndex])    
                }
            }
            isFive(fuArr);
        }
        let preStep=()=>{
            arr = saveArr;
            step = saveStep;
            saveDom.setAttribute("data-status",-1)
            saveDom.nextSibling.innerText=null;
        }
        let isFive=(arr)=>{
            // console.log(arr);
            var obj={
                "-1":0,
                "0":0,
                "1":0,
            }
            for (let index = 0; index < arr.length; index++) {
                if (arr[index]==arr[index+1]||arr[index]==arr[index-1]) {
                    if (index>=0) {
                        obj[arr[index]]++;
                    }
                }else{
                    if (index>=0) {
                        obj[arr[index]]=0;
                    }
                }
            }
            for (const key in obj) {
                const element = obj[key];
                if (element>=5&&key!=-1) {
                    var person = key*1+1
                    alert("玩家"+person+"胜利")
                    haveShengli = true;
                }
            }
        }
    </script>
</body>
</html>